<template>
  <div class="btn_list">
    <!-- TODO: 活动规则 -->
    <div class="btn_item" @click="openRule">
      活动 <br />
      规则
    </div>

    <div
      class="btn_item"
      @click="toMyPrize"
      v-if="app.isLogin && mainPage.recordId"
    >
      我的 <br />
      奖品
    </div>

    <div class="btn_item" @click="toPrizeList">
      中奖 <br />
      名单
    </div>
  </div>
</template>

<script>
import { getRouteParamsMini, envFunc, toWxWeb } from "@/utils/util";

export default {
  computed: {
    app() {
      return this.$store.state.app;
    },
    mainPage() {
      return this.$store.state.mainPage;
    }
  },
  methods: {
    toMyPrize() {
      envFunc(
        () => {
          this.$router.push("reward");
        },
        () => {
          let params = getRouteParamsMini();
          const { sessionCode, isbind, mobileNo, uuid } = params;
          const { recordId } = this.mainPage;

          let url = `/pages/webview/webview?url=${encodeURIComponent(
            `${location.origin}${location.pathname}#/reward?sessionCode=${sessionCode}&isbind=${isbind}&mobileNo=${mobileNo}&uuid=${uuid}&recordId=${recordId}`
          )}`;

          toWxWeb(url);

          // this.$router.push({ path: "reward", query: params });
        }
      );
    },
    toPrizeList() {
      setHmt("home", "list");

      this.$store.commit("changePrizeTab", true);
    },
    openRule() {
      this.$store.commit("changeActRule", true);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.btn_list {
  .btn_item {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.23);
    opacity: 0.76;
    border-radius: 50%;
    padding: 16px;
    text-align: center;
    margin-bottom: 10px;
    // line-height: 10px;
    @include flex_config(center, center, row);
  }
}
</style>
